<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas演示</title>
	</head>
	<body>
		<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #ccc;">
			
		</canvas>
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
			ctx.fillRect(10,10,50,50);//从画布上的(10,10)坐标点为起始点，绘制一个宽高均为50px的实心矩形
			ctx.strokeRect(70,10,50,50);//从画布上的(70,10)坐标点为起始点，绘制一个宽高均为50px的描边矩形
		</script>
	</body>
</html>